<template>
    <el-card class="swiper-container">
        <template #header>
            <div class="header">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">增加</el-button>
                <el-popconfirm title="确定删除吗？" @confirm="handleDelete">
                    <template #reference>
                        <el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button>
                    </template>
                </el-popconfirm>
            </div>
        </template>
        <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="轮播图" width="200">
                <template #default="scope">
                    <img style="width: 150px;height: 150px" :src="scope.row.carouselUrl" alt="轮播图">
                </template>
            </el-table-column>
            <el-table-column label="跳转链接">
                <template #default="scope">
                    <a target="_blank" :href="scope.row.redirectUrl">{{ scope.row.redirectUrl }}</a>
                </template>
            </el-table-column>
            <el-table-column prop="carouselRank" label="排序值" width="120">
            </el-table-column>
            <el-table-column prop="createTime" label="添加时间" width="200">
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.carouselId)">修改</a>
                    <el-popconfirm title="确定删除吗？" @confirm="handleDeleteOne(scope.row.carouselId)">
                        <template #reference>
                            <a style="cursor: pointer">删除</a>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--总数超过一页，再展示分页器-->
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="changePage" />
    </el-card>
    <DialogAddSwiper ref='addGood' :reload="getCarousels" :type="type" />
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import axios from "@/utils/axios";
import DialogAddSwiper from "@/components/DialogAddSwiper.vue";
export default {
    name: "Swiper",
    components: {
        DialogAddSwiper,
    },
    setup() {
        const state = reactive({
            loading: false, // 控制加载动画
            tableData: [], // 数据列表
            currentPage: 1, // 当前页数
            pageSize: 10, // 每页请求数
            type: "add", //操作类型
        });
        //添加轮播图
        const handleAdd = () => {
            state.type = "add";
            DialogAddSwiper.value.open();
        };
        //修改轮播图
        const handleEdit = (id) => {
            state.type = "edit";
            DialogAddSwiper.value.open(id);
        };

        onMounted(() => {
            getCarousels();
        });
        // 获取轮播图列表
        const getCarousels = () => {
            state.loading = true;
            axios
                .get("/carousels", {
                    params: {
                        pageNumber: state.currentPage,
                        pageSize: state.pageSize,
                    },
                })
                .then((res) => {
                    state.tableData = res.list;
                    state.loading = false;
                });
        };
        return {
            ...toRefs(state),
            // addGood,
            handleAdd,
            handleEdit,
            getCarousels,
        };
    },
};
</script>